<template>
	<view class="couponsPage">
		<view class="couponList">
			<view class="couponItem couponType1" v-if="cardLists.length != 0" v-for="(cardItem, cardIndex) in cardLists"
				:key="cardIndex"
				:style="{backgroundImage:cardItem.applyStationType==1?`url(${imgUrlBase}/line_bg-1950677282751821176.png)`:`url(${imgUrlBase}/coupon13871004771978797099.png)`}">
				<view class="couponName">
					<view class="couponItemName_left flexColumnStartCenter">
						<view>
							<text style="font-size: 36rpx">{{ cardItem.cardSillStr}}</text>
						</view>
						<view style="font-size: 24rpx">
							{{ cardItem.applyStationType === 1?'所有站点':cardItem.applyStationType === 2?'指定站点':'指定条件' }}
						</view>
						<view style="font-size: 24rpx">{{ cardItem.usableStatus === 1?'全天可用':'指定时段' }}</view>
					</view>
					<view class="couponItemName_right flexColumnStart">
						<view style="font-size: 32rpx">{{ cardItem.cardName }}*{{cardItem.rewardsNumber}}</view>
						<view style="font-size: 26rpx" v-if="cardItem.useSillQuota">满{{ cardItem.useSillQuota }}可用</view>
						<view style="font-size: 26rpx" v-if="!cardItem.useSillQuota">不限</view>
						<view>
							<view style="font-size: 24rpx">
								<text style="margin-right: 10rpx">始</text>
								<text
									v-if="cardItem.restrictStatus == '1' || cardItem.usableStatus == '1'">{{ cardItem.useStartTime }}</text>
								<text v-else>{{ cardItem.fixedStartTime }}</text>
							</view>
							<view style="font-size: 24rpx">
								<text style="margin-right: 10rpx">止</text>
								<text
									v-if="cardItem.restrictStatus == '1' || cardItem.usableStatus == '1'">{{ cardItem.useEndTime }}</text>
								<text v-else>{{ cardItem.fixedEndTime }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="couponRule flexColumnStart">
					<view>
						<view v-if="cardItem.cardOptionList&&cardItem.applyStationType==2">可用站点：
							<text v-for="(item,index) in cardItem.cardOptionList" :key="index">
								<text v-if="index!=0">、</text>
								{{item.stationName}}
							</text>
						</view>
						<view v-if="cardItem.applyStationType==1">可用站点：所有站点</view>
						<view v-if="!cardItem.cardOptionList">可用站点：暂无</view>
					</view>
					<view>
						<view>
							可用时段：{{ cardItem.usableStatus == 1 ? '全天可用':cardItem.qualifyTime }}
						</view>
					</view>
				</view>
			</view>
			<view
				:style="{backgroundImage:couponItem.applyStationType==1?`url(${imgUrlBase}/line_bg-1950677282751821176.png)`:`url(${imgUrlBase}/coupon25181193859621103027.png)`}"
				class="couponItem couponType3" v-if="couponLists.length != 0"
				v-for="(couponItem, couponIndex) in couponLists" :key="couponItem">
				<view class="couponName">
					<view class="couponItemName_left flexColumnStartCenter">
						<view>
							<text style="font-size: 34rpx">￥</text>
							<text style="font-size: 52rpx">{{ parseInt(couponItem.couponsSillStr)}}</text>
						</view>
						<view style="font-size: 24rpx">
							{{ couponItem.applyStationType === 1?'所有站点':couponItem.applyStationType === 2?'指定站点':'指定条件' }}
						</view>
						<view style="font-size: 24rpx">{{ couponItem.usableStatus === 1?'全天可用':'指定时段' }}</view>
					</view>
					<view class="couponItemName_right flexColumnStart">
						<view style="font-size: 34rpx">{{ couponItem.couponName }}*{{couponItem.rewardsNumber}}</view>
						<view style="font-size: 26rpx">
							{{ couponItem.useSill === 1?'整单金额':couponItem.useSill === 2?'服务费':'电费' }}
						</view>
						<view v-if="couponItem.usableDayStatus == 3">
							<view style="font-size: 24rpx">
								<text style="margin-right: 10rpx">始</text>
								<text
									v-if="couponItem.restrictStatus == '1' || couponItem.usableDayStatus == '3'">{{ couponItem.useStartTime }}</text>
								<text v-else>{{ couponItem.fixedStartTime }}</text>
							</view>
							<view style="font-size: 24rpx">
								<text style="margin-right: 10rpx">止</text>
								<text
									v-if="couponItem.restrictStatus == '1' || couponItem.usableDayStatus == '3'">{{ couponItem.useEndTime }}</text>
								<text v-else>{{ couponItem.fixedEndTime }}</text>
							</view>
						</view>
						<view v-if="couponItem.usableDayStatus == 4">
							<view style="font-size: 24rpx">
							</view>
							<view style="font-size: 24rpx">
								<text style="margin-right: 10rpx"
									v-for="(witem,windex) in couponItem.limitWeekDate.split(',')"
									:key="windex">每周{{ witem }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="couponRule flexColumnStart">
					<view>
						<view v-if="couponItem.applyStationType==2&&couponItem.couponOptionList">可用站点：
							<text v-for="(item,index) in couponItem.couponOptionList" :key="index">
								<text v-if="index!=0">、</text>
								{{item.stationName}}
							</text>
						</view>
						<view v-if="couponItem.applyStationType==1">可用站点：所有站点</view>
						<view v-if="!couponItem.couponOptionList">可用站点：暂无</view>
					</view>
					<view>
						<view>
							可用时段：{{ couponItem.usableStatus == 1 ? '全天可用':couponItem.qualifyTime }}
						</view>
					</view>
				</view>
			</view>
			<view :style="{backgroundImage:`url(${imgUrlBase}/bg-quanyi8568161412576397785.png)`}"
				style="min-height:200rpx;margin-bottom:20rpx;" class="couponItem couponType1"
				v-if="equityLists&&equityLists.length != 0" v-for="(equityItem, equityIndex) in equityLists"
				:key="equityIndex">
				<view class="couponName">
					<view class="couponItemName_left flexColumnStartCenter" style="height:100rpx">
						<view style="font-size: 26rpx">{{ equityItem.equityStatus === 1?'即时生效':'定时生效' }}</view>
					</view>
					<view class="couponItemName_right flexColumnStart" style="height:100rpx">
						<view style="font-size: 34rpx">{{ equityItem.equityName }}</view>
					</view>
				</view>
				<view class="couponRule flexColumnStart">
					<view>
						<view>可用时段：{{equityItem.equityStartTime}}至{{equityItem.equityEndTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view v-if="isLogin" class="bottom_button">
			<view v-if="!isReceive" class="button" :style="{backgroundColor:defaultColor}" @click="getItNow">立即领取</view>
			<view v-else class="button button-no">立即领取</view>
		</view>
		<view v-else class="bottom_button">
			<view class="button" :style="{backgroundColor:defaultColor}" @click="toLogin">登录后立即领取</view>
		</view>
	</view>
</template>

<script>
	import {
	getCouponDetailById,
	voucherPackageCollection
} from "@/api/marketing/coupon";
	const app = getApp();
	var util = require('@/utils/util.js');
	var debounce = new util.Debounce();
	
	export default {
		data() {
			return {
				imgUrlBase: `${app.globalData.imgUrl}/group1/image`,
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				couponShow: true,
				cardLists: [],
				couponLists: [],
				equityLists: [],
				couponId: null,
				isReceive: false, // 是否领取
				isLogin: false,
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.couponId = options.id;
			}
			this.getCouponDetails(options.id)
		},

		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			} else {
				this.isLogin = false
				this.toLogin()
			}
		},

		methods: {
			//登录
			toLogin() {
				app.globalData.CHECK_LOGIN_Model({}, '请先完成登录后才能领取！');
			},

			getCouponDetails(id) {
				getCouponDetailById(id).then(res => {
					if (res.code == 200 && res.data) {
						if (res.data.cardLists && res.data.cardLists.length != 0) {
							this.cardLists = res.data.cardLists || [];
							uni.setNavigationBarTitle({
								title: '卡详情'
							})
						}
						if (res.data.couponLists && res.data.couponLists.length != 0) {
							this.couponLists = res.data.couponLists || [];
							uni.setNavigationBarTitle({
								title: '优惠券详情'
							})
						}
						if (res.data.equityLists && res.data.equityLists.length != 0) {
							this.equityLists = res.data.equityLists || [];
							uni.setNavigationBarTitle({
								title: '权益详情'
							})
						}
						console.log(this.couponLists, '111111111')
					}
				})
			},
			getItNow() {
				debounce.use(() => {
					uni.showLoading({
						title: '领取中',
						mask: true
					});
					if (this.isReceive) return
					this.isReceive = true;

					voucherPackageCollection(this.couponId).then(res => {
						if (res.code == 200) {
							uni.hideLoading();
							setTimeout(() => {
								uni.showToast({
									title: '领取成功',
									icon: 'none',
									duration: 1000,
									mask: true
								});
								setTimeout(() => {
									uni.redirectTo({
										url: "/mine/pages/couponCenter/index",
									});
								}, 1000)
							}, 300)
						} else {
							this.isReceive = false
							uni.hideLoading();
							setTimeout(() => {
								uni.showToast({
									title: res.msg  || '领取失败!',
									icon: 'none',
								});
							}, 300)
						}
					})
				}, 2000)();
			},
		}
	};
</script>

<style lang="less" scoped>
	.couponsPage {
		width: 100%;
		min-height: 100vh;
		background: #F5F7FA;
	}

	.flexColumnStart {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.flexColumnStartCenter {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.couponList {
		width: 94%;
		margin: 20rpx auto;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		opacity: 1;
	}

	.couponItem {
		width: 100%;
		min-height: 400rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.couponType1 {
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.couponType2 {
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.couponType3 {
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.couponName {
		width: 100%;
		height: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 20rpx 26rpx 20rpx;
		box-sizing: border-box;
		color: #ffffff;
	}

	.couponItemName_left {
		width: 200rpx;
		height: 168rpx;
		border-right: 1rpx dashed #fff;
	}

	.couponItemName_right {
		height: 145rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.couponRule {
		width: 100%;
		height: 40%;
		font-size: 24rpx;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		color: #909399;

		>view {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;

			>view:nth-of-type(1) {
				flex: 1;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		>view:nth-of-type(2) {
			margin-top: 6rpx;
		}
	}

	.bottom_button {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.button {
			width: 88%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 44rpx;
		}

		.button-no {
			background-color: #afaeae;
		}
	}
</style>